<script lang="ts" setup>
	import common from '@/api/common.js'
	import article from '@/api/article.js'
	import list2 from '@/components/detail_list.vue'
	
	import {
		reactive,
		inject,
		ref,
		watch
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const apiTry : Function = inject('$try')
	//下拉刷新阈值
	let _triggered = ref(false)
	let triggered = ref(false)
	let swiperCurrent = ref(0)
	let gather = reactive({
		navList: [],
		list: [],
		poster: [],
		searchValue: '',
		typeid: null,
		entryList: [],//词条
	})
	const more = () => {
		uni.navigateTo({
			url: `/pages_find/complete_entry/index`
		})
	}
	const hot = (item : AnyObject) => {
		uni.navigateTo({
			url: `/pages_find/entry_list/index?id=${item.id}&title=${item.title}&type=${item.type}`
		})
	}
	const change = () => {
		
	}
	const listSwitch = (e : any) => {
		swiperCurrent.value = e.detail.current
		if (e.detail.current === 2) {
			gather.typeid = 3
			getArticleListHot()
		}
	}
	//中止触发
	const onAbort = () => {
		triggered.value = false
	}
	//刷新触发
	const onRefresh = () => {
		if (_triggered.value) return
		_triggered.value = true
		if (!triggered.value) triggered.value = true
		if (swiperCurrent.value === 2) {
			gather.typeid = 3
		} else {
			gather.typeid = null
		}
		getArticleListHot(() => {
			triggered.value = false
			_triggered.value = false
		})
	}
	//复位
	const onRestore = () => {
		triggered.value = false
		_triggered.value = false
	}
	//获取榜单列表
	const getArticleListHot = async (cb = () => { }) => {
		gather.list = []
		const [err, res] = await apiTry(article.getArticleListHot({
			hot: 50,
			likerid: uni.getStorageSync('userinfo').userid ? uni.getStorageSync('userinfo').userid : '',
			searchValue: gather.searchValue,
			typeid: gather.typeid
		}))
		if (err) return false
		gather.list = res.data
		cb()
	}

	//获取分类
	const getType = async () => {
		const [err, res] = await apiTry(common.dictionary('hot,poster'))
		if (err) return false
		gather.navList = res.data.hot
		gather.poster = res.data.poster
	}
	const search = () => {
		gather.typeid = null
		getArticleListHot()
	}

	watch(() => gather.searchValue, (newValue) => {
		if (!newValue) return getArticleListHot()
	})
	const giveLike = () => {
		getArticleListHot()
	}
	const getEntryList = async () => {
		const res = await article.getEntryList({
			page: 1,
			pageSize: 10,
			searchValue: gather.searchValue,
			type: -1
		})
		gather.entryList = res.data
	}

	onLoad(() => {
		getType()
		getArticleListHot(() => { })
		getEntryList()

	})
</script>
<template>
	<view class="main flex flex-dir-c">
		<view>
			<u-navbar :is-back="false" height="55">
				<u-search style="margin: 0 20rpx;" placeholder="搜索" :show-action="false" @search="search"
					v-model="gather.searchValue"></u-search>
			</u-navbar>
			<u-tabs name="text" class="tabs" active-color="rgb(252,186,13)" :list="gather.navList" :is-scroll="false"
				v-model="swiperCurrent" @change="change"></u-tabs>
		</view>
		<swiper :current="swiperCurrent" @change="listSwitch" class="swiper" :duration="300">
			<swiper-item class="swiper-item">
				<list2 @giveLike="giveLike" :swiperCurrent="swiperCurrent" :list="gather.list" @onAbort="onAbort"
					@onRefresh="onRefresh" @onRestore="onRestore" :triggered="triggered">
					<template v-slot:hot>
						<view>
							<view class="flex flex-jc-sb flex-ai-c" style="font-size: 26rpx;">
								<view style="width: 50%;margin: 0 20rpx;">文章hot榜:</view>
								<view style="margin: 0 20rpx;color: gray;padding: 25rpx;" @click="more">
									完整词条
									<u-icon name="arrow-right" color="gray"></u-icon>
								</view>
							</view>
							<view class="flex flex-wrap-w flex-jc-sb" style="position: relative;">
								<view v-for="(item,index) in gather.entryList" :key="item.id"
									style="width: 50%;line-height: 50rpx;" class="description">
									<view style="margin: 0 20rpx;" @click="hot(item)">
										<text
											:style="{'color': index < 3 ? 'red':'orange','font-weight': index <3 ?'600':'' }">
											{{index+1}}：
										</text>
										<text>{{item.title}}</text>
									</view>
								</view>
							</view>

						</view>
						<view style="margin: 20rpx;">
							<u-swiper height="400" border-radius="30" name="name" img-mode="aspectFill"
								:list="gather.poster" title></u-swiper>
						</view>
					</template>
				</list2>
			</swiper-item>
			<swiper-item class="swiper-item">

			</swiper-item>
			<swiper-item class="swiper-item">
				<list2 @giveLike="giveLike" :swiperCurrent="swiperCurrent" :list="gather.list" @onAbort="onAbort"
					@onRefresh="onRefresh" @onRestore="onRestore" :triggered="triggered">
				</list2>
			</swiper-item>
			<swiper-item class="swiper-item">

			</swiper-item>
		</swiper>
	</view>
</template>
<style lang="scss" scoped>
	page {
		height: 100%;
	}

	.description {
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.main {
		height: 100%;

		.tabs {
			width: 100%;
		}

		.swiper {
			flex: 1;

			.swiper-item {}

			.more {
				margin: 0 20rpx;
				color: orange;
			}
		}
	}
</style>